<template>
  <ScreenFit>
    <div class="dashboard">
      <div class="header">
        <BoardHeader></BoardHeader>
      </div>
      <div class="content">
        <div class="content-left">
          <div class="content-left-item">
            <ServerDashBoard1 :info="taskAnalysisMetrics"></ServerDashBoard1>
          </div>
          <div class="content-left-item">
            <ServerDashBoard2 :info="tendList"></ServerDashBoard2>
          </div>
          <div class="content-left-item">
            <ServerDashBoard3 :info="taskAnalysis"></ServerDashBoard3>
          </div>
        </div>
        <div class="content-middle">
          <div class="content-middle-item">
            <ServerDashBoard4 :info="patrolAlarmLocation"></ServerDashBoard4>
          </div>
          <div class="content-middle-item">
            <ServerDashBoard5></ServerDashBoard5>
          </div>
        </div>
        <div class="content-right">
          <div class="content-right-item">
            <ServerDashBoard7 :info="taskTrace"></ServerDashBoard7>
          </div>
          <div class="content-right-item">
            <ServerDashBoard8 :info="overTimeTaskList"></ServerDashBoard8>
          </div>
          <div class="content-right-item">
            <ServerDashBoard9 :info="todayTaskTimeInfo"></ServerDashBoard9>
          </div>
        </div>
      </div>
    </div>
  </ScreenFit>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import BoardHeader from '@/components/ServerDashBoard/BoardHeader.vue'
import ServerDashBoard1 from '@/components/ServerDashBoard/ServerDashBoard1.vue'
import ServerDashBoard2 from '@/components/ServerDashBoard/ServerDashBoard2.vue'
import ServerDashBoard3 from '@/components/ServerDashBoard/ServerDashBoard3.vue'
import ServerDashBoard4 from '@/components/ServerDashBoard/ServerDashBoard4.vue'
import ServerDashBoard5 from '@/components/ServerDashBoard/ServerDashBoard5.vue'
import ServerDashBoard7 from '@/components/ServerDashBoard/ServerDashBoard7.vue'
import ServerDashBoard8 from '@/components/ServerDashBoard/ServerDashBoard8.vue'
import ServerDashBoard9 from '@/components/ServerDashBoard/ServerDashBoard9.vue'
import {
  getTaskAnalysisMetrics,
  getTaskTend,
  getTaskTrace,
  getOverTimeTask,
  getTodayTaskTime,
  getTrajectoryPath
} from '@/api/serverApi'
import { useRoute } from 'vue-router'
import { useBaseParamStore } from '@/stores/baseParams'

const baseParamStore = useBaseParamStore()
const route = useRoute()

// 查询任务分析区指标接口
const taskAnalysisMetrics = ref([])
const queryTaskAnalysisMetrics = async () => {
  try {
    const res = await getTaskAnalysisMetrics({
      orgId: route.query.orgId,
      waiterId: route.query.waiterId,
      startDate: baseParamStore.baseParam?.pickTime[0],
      endDate: baseParamStore.baseParam?.pickTime[1]
    })
    if (res && res.data) {
      taskAnalysisMetrics.value = res.data
    }
  } catch (error) {
    console.error('获取获取告警详情信息失败:', error)
  }
}

// 查询任务分析区指标接口
const tendList = ref([])
const taskAnalysis = ref([])
const queryTaskTend = async () => {
  try {
    const res = await getTaskTend({
      waiterId: route.query.waiterId,
      orgId: route.query.orgId
    })
    if (res && res.data) {
      tendList.value = res.data.tendList
      taskAnalysis.value = res.data.taskAnalysis
    }
  } catch (error) {
    console.error('获取获取告警详情信息失败:', error)
  }
}

// 服务部精准巡查调度（服务员）-任务跟踪
const taskTrace = ref([])
const queryTaskTrace = async () => {
  try {
    const res = await getTaskTrace({
      waiterId: route.query.waiterId,
      orgId: route.query.orgId,
      startTime: baseParamStore.baseParam?.pickTime[0],
      endTime: baseParamStore.baseParam?.pickTime[1]
    })
    if (res && res.data) {
      taskTrace.value = res.data
    }
  } catch (error) {
    console.error('获取获取告警详情信息失败:', error)
  }
}

// 服务部精准巡查调度（服务员）-任务跟踪
const overTimeTaskList = ref([])
const queryOverTimeTask = async () => {
  try {
    const res = await getOverTimeTask({
      waiterId: route.query.waiterId,
      orgId: route.query.orgId,
      startTime: baseParamStore.baseParam?.pickTime[0],
      endTime: baseParamStore.baseParam?.pickTime[1]
    })
    if (res && res.data) {
      overTimeTaskList.value = res.data
    }
  } catch (error) {
    console.error('获取获取告警详情信息失败:', error)
  }
}

// 服务部精准巡查调度（服务员）-每日任务耗时分析
const todayTaskTimeInfo = ref([])
const queryTodayTaskTime = async () => {
  try {
    const res = await getTodayTaskTime({
      waiterId: route.query.waiterId
    })
    if (res && res.data) {
      todayTaskTimeInfo.value = res.data
    }
  } catch (error) {
    console.error('获取获取告警详情信息失败:', error)
  }
}

// 服务员巡查路线建议
const patrolAlarmLocation = ref([])
const queryPatrolAlarmLocationByUserId = async () => {
  try {
    const res = await getTrajectoryPath({
      orgId: route.query.orgId
    })
    if (res && res.data) {
      patrolAlarmLocation.value = res.data
        .filter((item) => item.userId === route.query.waiterId)[0]
        .trajectoryPathList.reverse()
    }
  } catch (error) {
    console.error('获取服务员巡查路线建议信息失败:', error)
  }
}

onMounted(() => {
  queryTaskAnalysisMetrics()
  queryTaskTend()
  queryTaskTrace()
  queryOverTimeTask()
  queryTodayTaskTime()
  queryPatrolAlarmLocationByUserId()
})
</script>

<style scoped lang="scss">
.dashboard {
  background: linear-gradient(90deg, #04102a, #123d70, #04102a);
  color: white;
  width: 100%;
  height: 100%;

  .content {
    display: flex;
    padding: 0 43px 30px;

    .content-left {
      width: 500px;
      background-color: rgba($color: #000000, $alpha: 0.1);
    }

    .content-middle {
      flex: 1;
      margin: 0 10px;

      &-item {
        display: flex;
        justify-content: space-between;
      }
    }

    .content-right {
      width: 500px;
      background-color: rgba($color: #000000, $alpha: 0.1);

      &-item {
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
